<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#left{
				width: 200px;
				height: 100%;
				background: #4d5e70;
				float: left;
			}
			#right{
				min-width: 973px;
				height: 500px;
				/*background: blueviolet;*/
				float: left;
			}
			#logo{
				padding-top: 20px;
			    padding-bottom: 20px;
			    height: 45px;
			    background-color: #354457;
			    font-size: 17px;
			    color: #fff;
			}
			#div0{
				padding: 10px 5px 10px;
			    margin: 0 5px;
			    color: #b3bcc5;
			    border-bottom: 1px solid #354457;
			    padding-left: 20px;
			}
			
			.d1{
				padding-left: 20px;
				color: #828e9a;
			    padding-top: 10px;
			    padding-bottom: 10px;
			    font-size: 14px;
			    font-weight: bold;
			}
			.d2{
				padding-left: 20px;
				line-height: 40px;
			    height: 40px;
			    color: #aab1b7;
			    font-size: 14px;
			    cursor:pointer;
			}
			img{
				padding-right: 8px;
				height: 16px;
			}
			#div1_0{
				width: 973px;
				height: 70px;
			}
			#div1_1{
				width: 235px;
				height: 70px;
				line-height: 70px;
				padding-right: 15px;
    			padding-left: 15px;
    			font-size: 12px;
    			float: left;
			}
			#b1{
				color: #eab67c!important;
    			border: 1px solid #eab67c!important;
				width: 68px;
				height: 26px;
				font-size: 12px;
    			border-radius: 3px;
			}
			#text{
				width: 200px !important;
				height: 17px;
			    font-size: 13px;
			    color: #34495e;
    			border: 1px solid #bdc3c7;
			    border-radius: 3px;
			}
			#b2{
				width: 46px;
				height: 26px;
				color: #34495e;
				font-size: 12px;
				border-radius: 3px;
				border: 1px solid #ccc!important;
				font-weight: normal!important;
			}
			#div1_1_1{
				width: 314px;
				height: 70px;
				float: left;
				padding-right: 15px;
			    padding-left: 15px;
			    line-height: 70px;
			}
			.left{
				background-color: #3d4e60;
			    border-right: 4px solid #647f9d;
			    color: #fff;
			}
			.del{
				width: 42px;
				height: 24px;
				border: 0px solid black;
				border-radius: 3px;
				color: #fff;
    			background-color: #2ecc71;
    			font-size: 12px;
    			font-weight: 400;
    			cursor:pointer;
			}
			.update{
				width: 42px;
				height: 24px;
				border: 0px solid black;
				border-radius: 3px;
				color: #fff;
    			background-color: #e74c3c;
    			font-size: 12px;
    			font-weight: 400;
    			margin-left: 4px;
    			cursor:pointer;
			}
			#tab th{
					width: 200px;
					padding: 10px;
					padding-left: 5px;
					background-color: #e3e8ee;
			}
			#tab td{
					/*width: 200px;*/
					text-align: center;
					padding: 10px;
					padding-left: 5px;
			}
			#page{
				color: #b7b7b7;
			}	
			#select{
				margin: 0;
			    font: inherit;
			    color: inherit;
			}
			#tj{
				box-shadow: 0 5px 15px rgba(0,0,0,.5);
				width: 350px;
				height: 400px;
				background: white;
				position: fixed;
				top: 3%;
				left: 23%;
				color: #4b4b4b;
			}
			#tj_1{
				padding: 15px;
				border-bottom: 1px solid #e5e5e5;
			}
			#tj_2{
				padding-top: 20px;
				width: 220px;
				margin: 0px auto;
				
			}
			input{
				border: 1px solid #bdc3c7;
				margin-bottom: 20px;
				font-size: 13px;
			    line-height: 1.462;
			    border-radius: 3px;
			}
			#tj_3{
				width: 100%;
				border-top: 1px solid #e5e5e5;
				padding-top: 10px;
			}
			.btnqx{
				width: 47px;
				height: 26px;
				border: 1px solid #ccc!important;
    			font-weight: normal!important;
				margin-left: 130px;
				font-size: 12px;
				border-radius: 3px;
				margin-right: 10px;
			}
			.btnqd{
				width: 47px;
				height: 26px;
				border: 1px solid #ccc!important;
			    font-weight: normal!important;
			    color: #fff;
			    background: #529373;
				font-size: 12px;
				border-radius: 3px;
			}
			#xg{
				box-shadow: 0 5px 15px rgba(0,0,0,.5);
				width: 350px;
				height: 400px;
				background: white;
				position: fixed;
				top: 3%;
				left: 23%;
				color: #4b4b4b;
			}
			#xg_1{
				padding: 15px;
				border-bottom: 1px solid #e5e5e5;
			}
			#xg_2{
				padding-top: 20px;
				width: 220px;
				margin: 0px auto;
				
			}
			#xg_3{
				width: 100%;
				border-top: 1px solid #e5e5e5;
				padding-top: 10px;
			}		
		</style>
	</head>
	<body>
		<div id="left">
			<div id="logo">
				
			</div>
			<div id="div0">
				<a href="/11.html">退出登录</a>
			</div>
			<div class="d1" id="zh">账号管理</div>
			<div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>资源管理
				</div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>权限管理
				</div>
				<div class="d2" id="yh">
					<img src="../static/img/icon_source.png"/>用户管理
				</div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>修改密码
				</div>
			</div>	
			<div class="d1" id="dq">地区管理</div>
			<div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>地区管理
				</div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>规则管理
				</div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>人员信息
				</div>
				<div id="" class="d2">
					<img src="../static/img/icon_source.png"/>座位管理
				</div>
			</div>
		</div>
		<div id="right">
			<div id="yh1"><!--用户-->
				<div id="div1">
					<div id="div1_0">
						<div id="div1_1">
						<div><button id="b1" >添加用户</button></div>
						</div>
						<div id="div1_1_1">
							<input type="text" id="text" value="" placeholder="  输入文字搜索"/>
							<button id="b2">查询</button>
						</div>
					</div>
					<div id="div1_2">
						<table id="tab">
							<th>标题</th>
							<th>时间</th>
							<th>内容</th>
							<th>图片</th>
							<th>推荐</th>
							<th>用户</th>
							<th>操作</th>
						</table>
					</div>
					<div id="page">
					    <select id="select">
					    	<option value="1">1</option>
					    </select>
					    <button  onclick="btnleft ()"><</button><button onclick="btnright ()">></button>
					</div>
					
				</div>
			</div>
			<div id="tj"><!--添加-->
				<div id="tj_1">
					<h4>添加用户</h4>
				</div>
				<div id="tj_2">
					标题:<input type="text" name="" id="title" value="" /><br />
					内容:<input type="text" name="" id="content" value="" /><br />
					用户:<input type="text" name="" id="name_id" value="" />
				</div>
				<div id="tj_3">
					<button class="btnqx" id="btnqx">取消</button><button class="btnqd"  id="btnqd">保存</button>
				</div>
			</div>
			
			<div id="xg"><!--修改-->
				<div id="xg_1">
					<h4>修改用户</h4>
				</div>
				<div id="xg_2">
					标题:<input type="text" name="" id="title1" value="" /><br />
					内容:<input type="text" name="" id="content1" value="" /><br />
					用户:<input type="text" name="" id="name_id1" value="" />
				</div>
				<div id="xg_3">
					<button  class="btnqx" id="btnqx1">取消</button><button  class="btnqd"  id="btnqd1">保存</button>
				</div>
			</div>
		</div>
		<script src="/bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#dq").next().slideUp();//上滑
				$("#zh").next().slideUp();//上滑
				$("#dq").click(function(){
					$("#dq").next().slideToggle();
				});
				$("#zh").click(function(){
					$("#zh").next().slideToggle();
				});
				
				$(".d2").click(function(){
					$(this).addClass("left");
					$(this).siblings().removeClass("left");
				});
				
				$("#yh1").slideUp();//上滑
				
				$("#yh").click(function(){
					$("#yh1").slideToggle();
				});
				
				$("#tj").slideUp(0);//上滑
				$('#b1').click(function(){//添加
					$("#tj").slideToggle();
				});
				
				$('#btnqx').click(function(){//添加
					$("#tj").slideToggle();
				});
				$('#btnqd').click(function(){//添加
					var t=$('#title').val();
					var c=$('#content').val();
					var n=$('#name_id').val();
					$.ajax({
						type:"post",
						url:"/111.php",
						data:{
			                title:t,
			                content:c,
			                name_id:n
			            },
			            success:function(mgs){
			            	console.log(mgs);
			            }
					});
				});
				
				$("#xg").slideUp(0);//上滑
				$('#btnqx1').click(function(){//修改
					$("#xg").slideToggle();
				});
				var uid=1;
				$('#btnqd1').click(function(){//修改
					var t=$('#title1').val();
					var c=$('#content1').val();
					var n=$('#name_id1').val();
					$.ajax({
						type:"post",
						url:"/11111.php",
						data:{
							uid:uid,
			                title:t,
			                content:c,
			                name_id:n
			            },
			            success:function(mgs){
			            	console.log(mgs);
			            	$('[uid='+uid+']').parent().parent().children().eq(0).text(t);
			            	$('[uid='+uid+']').parent().parent().children().eq(2).text(c);
			            	$('[uid='+uid+']').parent().parent().children().eq(5).text(n);
			            }
					});
				});
				
				
				
				
				
				var th='<tr>'+'<th>标题</th>'+'<th>时间</th>'+'<th>内容</th>'+'<th>图片</th>'+'<th>推荐</th>'+'<th>用户</th>'+'<th>操作</th>'+'</tr>';
			    
			    $.ajax({
			            type:"get",
			            url:"/11.php",
			            data:{
			                page:1
			            },
			            dataType:'json',
			            success:function(mgs){
			            	console.log(mgs);
			                var data=mgs.data;
			                var count=mgs.count;
			                var html='';
			                for (var i in data) {
			                    html+="<tr>";
			                    for (var d in data[i]) {
			                        if(d=='uid')
			                        {
			                            continue;
			                        }
			                        html+="<td>"+data[i][d]+"</td>"
			                    }
			                    html+='<td><button class="del" name="del" uid='+data[i]['uid']
			                        +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                        +'">修改</button></td></tr>';
			                }
			                $('#tab').html(th+html);
			                $('.del').click(function(){//删除
			                	var btn_this=$(this);
								$.ajax({
									type:"post",
									url:"/1111.php",
									data:{
										uid:$(this).attr('uid')
									},
									success:function(mgs){
						            	console.log(mgs);
						            	btn_this.parent().parent().remove();
						            }
								});
							});
							
							$('.update').click(function(){//修改
								$("#xg").slideToggle();
								uid=$(this).attr('uid');
							});
							/*//查看*/
							$('#b2').click(function(){
								var txt=$('#text').val();
								console.log(txt);
								var html1='';
								for (var i in data) {
				                    for (var d in data[i]) {
				                        if((data[i][d]).indexOf(txt)!=-1){
				                        	html1+="<tr>";
											for (var j in data[i]) {
												if(j=='uid')
						                        {
						                            continue;
						                        }
												html1+="<td>"+data[i][j]+"</td>"
											}//3.添加功能按钮
											html1+='<td><button class="del" name="del" uid='+data[i]['uid']
								                +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
								                +'">修改</button></td></tr>';break;
				                    	}
									}
				                }
				                $('#tab').html(th+html1);
				                $('.del').click(function(){//删除
			                	var btn_this=$(this);
									$.ajax({
										type:"post",
										url:"/1111.php",
										data:{
											uid:$(this).attr('uid')
										},
										success:function(mgs){
							            	console.log(mgs);
							            	btn_this.parent().parent().remove();
							            }
									});
								});
							
								$('.update').click(function(){//修改
									$("#xg").slideToggle();
									uid=$(this).attr('uid');
								});
							});
							/*//查看*/
			                var s='';
			                for (var i=1;i<=count;i++){
			                	s+="<option value='"+i+"'>"+i+"</option>";
			                }
			                $('#select').html(s);
			                $('#select').after("页"+" 共"+count+"页");
			            }
			        });
			    $("#select").change(function(){
					var val=$("#select>option:selected").val();//也可以用#slt1>option:checked, 获取到下拉框被选中的option的 value值
					console.log(val);
					$.ajax({
			            type:"get",
			            url:"/11.php",
			            data:{
			                page:val
			            },
			            dataType:'json',
			            success:function(mgs){
			            	console.log(mgs);
			                var data=mgs.data;
			                var count=mgs.count;
			                var html='';
			                for (var i in data) {
			                    html+="<tr>";
			                    for (var d in data[i]) {
			                        if(d=='uid')
			                        {
			                            continue;
			                        }
			                        html+="<td>"+data[i][d]+"</td>"
			                    }
			                    html+='<td><button class="del" name="del" uid='+data[i]['uid']
			                        +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                        +'">修改</button></td></tr>';
			                }
			                $('#tab').html(th+html);
			                $('.del').click(function(){//删除
			                	var btn_this=$(this);
								$.ajax({
									type:"post",
									url:"/1111.php",
									data:{
										uid:$(this).attr('uid')
									},
									success:function(mgs){
						            	console.log(mgs);
						            	btn_this.parent().parent().remove();
						            }
								});
							});
							
							$('.update').click(function(){//修改
								$("#xg").slideToggle();
								uid=$(this).attr('uid');
							});
							/*//查看*/
							$('#b2').click(function(){//查看
								var txt=$('#text').val();
								console.log(txt);
								var html1='';
								for (var i in data) {
				                    for (var d in data[i]) {
				                        if((data[i][d]).indexOf(txt)!=-1){
				                        	html1+="<tr>";
											for (var j in data[i]) {
												if(j=='uid')
						                        {
						                            continue;
						                        }
												html1+="<td>"+data[i][j]+"</td>"
											}//3.添加功能按钮
											html1+='<td><button class="del" name="del" uid='+data[i]['uid']
								                +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
								                +'">修改</button></td></tr>';break;
				                    	}
									}
				                }
				                $('#tab').html(th+html1);
				                $('.del').click(function(){//删除
				                	var btn_this=$(this);
									$.ajax({
										type:"post",
										url:"/1111.php",
										data:{
											uid:$(this).attr('uid')
										},
										success:function(mgs){
							            	console.log(mgs);
							            	btn_this.parent().parent().remove();
							            }
									});
								});
							
								$('.update').click(function(){//修改
									$("#xg").slideToggle();
									uid=$(this).attr('uid');
								});
							});
							/*//查看*/
			            }
			        });
				});
			    
			});	
		</script>
	</body>
</html>
